<template>
  <div class="app-container">
    <basic-container>
      <avue-crud ref="crud"
                 v-model="vipLevelForm"
                 :page="vipLevelPage"
                 :data="tableData"
                 :option="tableOption"
                 :table-loading="vipLevelLoading"
                 @on-load="getList"
                 @refresh-change="refreshChange"
                 @row-update="rowUpdate"
                 @row-save="rowSave"
                 @row-del="rowDel">
        <template slot-scope="scope"
                  slot="flag">
          <el-tag v-if="Number(scope.row.flag)===0"
                  type="success">{{scope.label}}</el-tag>
          <el-tag v-else-if="Number(scope.row.flag)===1"
                  type="success">{{scope.label}}</el-tag>
          <el-tag v-else-if="Number(scope.row.flag)===2"
                  type="success">{{scope.label}}</el-tag>
          <el-tag v-else-if="Number(scope.row.flag)===3"
                  type="success">{{scope.label}}</el-tag>
          <el-tag v-else-if="Number(scope.row.flag)===4"
                  type="success">{{scope.label}}</el-tag>
          <el-tag v-else-if="Number(scope.row.flag)===5"
                  type="success">{{scope.label}}</el-tag>
          <el-tag v-else-if="Number(scope.row.flag)===6"
                  type="success">{{scope.label}}</el-tag>
          <el-tag v-else-if="Number(scope.row.flag)===7"
                  type="success">{{scope.label}}</el-tag>
        </template>
      </avue-crud>
    </basic-container>
  </div>
</template>

<script>
import {
  fetchList,
  addObj,
  putObj,
  delObj
} from "@/api/orderManage/orderManage";
export default {
  name: "crud",
  data() {
    return {
      vipLevelForm: {},
      vipLevelLoading: false,
      vipLevelPage: {
        total: 0,
        currentPage: 1,
        pageSize: 10,
        orderBy: `order by id asc`
      },
      tableOption: {
        index: true,
        border: true,
        stripe: true,
        selection: true,
        maxHeight: 400,
        menuWidth: 280,
        menu: true,
        indexLabel: "id",
        align: "center",
        doalogWidth: "60%",
        labelWidth: 120,
        header: false,
        column: [
          {
            label: "订单号",
            size: "small",
            prop: "ddcode"
          },
          {
            label: "酒店房间套餐",
            size: "small",
            prop: "fangjianmc"
          },
          {
            label: "姓名",
            size: "small",
            prop: "name"
          },
          {
            label: "电话",
            size: "small",
            prop: "phone"
          },
          {
            label: "金额",
            size: "small",
            prop: "jine"
          },
          {
            label: "订单状态",
            size: "small",
            type: "select",
            prop: "flag",
            solt: true,
            dicData: [
              {
                label: "已支付",
                value: "1"
              },
              {
                label: "已入住",
                value: "2"
              },
              {
                label: "进店付款",
                value: "3"
              },
              {
                label: "已完成",
                value: "4"
              },
              {
                label: "已取消",
                value: "5"
              },
              {
                label: "申请退款",
                value: "6"
              },
              {
                label: "退款完成",
                value: "7"
              }
            ]
          },
          {
            label: "订单时间",
            size: "small",
            prop: "indate"
          }
        ]
      },
      tableData: []
    };
  },
  created() {},
  mounted: function() {},
  methods: {
    getList(page) {
      this.vipLevelLoading = true;
      fetchList({
        start: (page.currentPage - 1) * page.pageSize,
        length: page.pageSize,
        orderBy: this.vipLevelPage.orderBy
      }).then(res => {
        this.vipLevelLoading = false;
        this.vipLevelPage.total = res.data.recordsTotal;
        this.tableData = res.data.data;
      });
    },
    refreshChange() {
      this.getList(this.vipLevelPage);
      this.$message({
        showClose: true,
        message: "刷新成功",
        type: "success"
      });
    },
    rowDel(row) {
      this.$confirm("是否确认删除", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          return delObj(row.id);
        })
        .then(() => {
          this.$message({
            showClose: true,
            message: "删除成功",
            type: "success"
          });
          this.getList(this.vipLevelPage);
        })
        .catch(function() {});
    },
    rowUpdate(row, index, done) {
      putObj(row).then(() => {
        this.$message({
          showClose: true,
          message: "修改成功",
          type: "success"
        });
        this.getList(this.vipLevelPage);
        done();
      });
    },
    rowSave(row, done) {
      addObj(Object.assign({}, row)).then(() => {
        this.$message({
          showClose: true,
          message: "添加成功",
          type: "success"
        });
        this.getList(this.vipLevelPage);
        done();
      });
    }
  }
};
</script>

